<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common :: header">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--头部区域-->
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/images/b07.jpg" class="layui-nav-img">
                    贤心
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#" onclick="loginOut()">退了</a></li>
        </ul>
    </div>

    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="test" id="memus"></ul>
        </div>
    </div>
    <!-- 右侧tab选项卡和内容 -->
    <div class="layui-body">
        <!-- 动态选项卡 -->
        <div id="tabzu" class="layui-tab layui-tab-brief layui-tab-brief" lay-filter="tabDemo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this " id="sy">
                    <i class="layui-icon layui-icon-home">首页</i>
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src="/index.html" frameborder="0" class="layadmin-iframe" height="800px" width="100%" ></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<div th:include="common :: footer"></div>
<script>
layui.use(['element','layer'], function() {
    /*让tab的首页不出现删除选项*/
    layui.$("#sy").children(".layui-tab-close").css("display","none");
    /*设置无极限左侧菜单 */
    function getChildren(arr) {
        var html1 = "";
        for(var j=0;j<arr.length; j++) {
            if (arr[j].url ==null||arr[j].url ==""){
                if (arr[j].children.length>0){
                    html1 +=  "<dd class=\"layui-nav-itemed\"><a href='javascript:;'>" + arr[j].name + "</a><dl class='layui-nav-child' >";
                    html1 +=  getChildren(arr[j].children);
                    html1 +=  "</dl></dd>";
                }else{
                    html1 += "<dd class=\"layui-nav-itemed\"><a href=\"javascript:;\">" + arr[j].name + "</a></dd>";
                }
            }else{
                html1 += "<dd class=\"layui-nav-itemed\">"+getAhtml(arr[j])+"</dd>";
            }
        }
        return html1;
    }

    function getAhtml(obj){
        return "<a href=\"javascript:;\" onclick=\"addTab('" + obj.name + "','" + obj.url + "')\" >" + obj.name + "</a>";
    }
    //动态菜单
    layui.jquery.ajax({
        url: "/system/resources/getResourcesTree",
        method: 'POST',
        async: false,
        success: function(results) {
            var res = results.data;
            var html = "";
            for(var i = 0; i < res.length; i++) {
                var  h= "<li class=\"layui-nav-item lay-unselect \" >";
                if (res[i].url ==null){
                    h += "<a href=\"javascript:;\">" + res[i].name + "</a>";
                }else{
                    h += getAhtml(res[i]);
                }
                if (res[i].children.length>0){
                    h +=  "<dl class=\"layui-nav-child\" >";
                    h += getChildren(res[i].children);
                    h +=  "</dl>";
                }
                h += "</li>";
                html +=h;
            }
            layui.jquery("#memus").html(html);
            layui.element.init(); //一定初始化一次
        }
    })
});

//添加选项卡
function addTab(name, url) {
    if(layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
        //选项卡已经存在
        layui.element.tabChange('tabDemo', name);
        layer.msg('切换-' + name)
    } else {
        //动态控制iframe高度
        var tabheight = layui.jquery(window).height();
        contentTxt = '<iframe src="' + url + '" frameborder="0" class="layadmin-iframe" width="100%" height="' + 1200 + 'PX"></iframe>';
        //新增一个Tab项
        layui.element.tabAdd('tabDemo', {
            title:name,
            content: contentTxt,
            id: name
        })
        //切换刷新
        layui.element.tabChange('tabDemo', name)
        layer.msg('新增-' + name)
    }
}

function loginOut() {
    layer.alert('墨绿风格，点击确认看深蓝', {
        skin: 'layui-layer-molv' //样式类名
        ,closeBtn: 0
    }, function(){
        layer.alert('偶吧深蓝style', {
            skin: 'layui-layer-lan'
            ,closeBtn: 0
            ,anim: 4 //动画类型
        });
    });
}

</script>
</body>
</html>